/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
   <div class="base-dialog">
    <el-dialog
      custom-class="cross-dialogs"
      :modal="false"
      top="0"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="closeFormDialog"
    >
    <div slot="title" class="el-dialog__title cross-modal-title">
      <el-tooltip v-if="crossname && crossname.length > 18" placement="bottom-start">
        <div slot="content">{{crossname}}</div>
        <span class="devname">{{crossname.substr(0, 18) + '...'}}</span>
      </el-tooltip>
      <span v-else>{{crossname}}</span>
    </div>
    <div class="control-info">
      <div class="item">
        <span class="label">{{$t('openatc.devicemanager.controlMode')}}:</span>
        <span class="value">{{$t('openatccomponents.overview.modelList' + deviceInfo.control)}}</span>
      </div>
      <div class="item">
        <span class="label">{{$t('openatc.devicemanager.platform')}}:</span>
        <span class="value">{{$t('openatc.patternstatistic.mode' + deviceInfo.mode)}}</span>
      </div>
      <div class="detail-btn">
        <el-button type="text" @click="onDetailClick">{{$t('openatc.common.detail')}}>></el-button>
      </div>
    </div>
    <div class="operate">
      <div class="edit-btn" @click="onChooseLocationClick">
        <i class="iconfont icon-lukouguanli1"></i>
        <span>{{$t('openatc.home.editposition')}}</span>
      </div>
    </div>
    <div class="cross">
      <div class="intersection-content">
        <intersection-with-interface
        v-if="visible"
        ref="intersectionWithInterface"
        :AgentId="agentid"
        @getTscControl="getTscControl"
        ></intersection-with-interface>
      </div>
    <!-- <intersectin-with-pattern
              v-if="visible"
              :agentid="agentid"
              ref="intersectinWithPattern"
              @getTscControl="getTscControl"
            ></intersectin-with-pattern> -->
    </div>

    <div class="control-group">
      <div class="control-btn" v-for="controlitem of controlList" :key="controlitem.id">
        <span class="control-content" :style="{'backgroundColor': controlitem.bgcolor}" @click="clickType(controlitem)" @mouseover="hoverInType(controlitem)" @mouseleave="hoverOutType(controlitem)">
          <span class="center-box">
            <IconSvg :control="controlitem.id" />
            <span class="control-name">{{controlitem.name}}</span>
          </span>
        </span>
      </div>
    </div>
    <div class="footer-btn">
      <el-button type="primary" class="execute-btn" @click="handleControl">{{$t('openatc.button.execute')}}</el-button>
    </div>
    </el-dialog>
    </div>
</template>

<script>
import IconSvg from './icon.vue'
import { getTheme } from '../../../../utils/auth.js'
import { putControl } from '../../../../api/control'
import { getMessageByCode } from '../../../../utils/responseMessage'
import IntersectinWithPattern from '../../../../components/IntersectinWithPattern'
import { mapState } from 'vuex'

export default {
  name: 'nodeCard',
  props: {
  },
  components: {
    IconSvg,
    IntersectinWithPattern
  },
  computed: {
    ...mapState({
      editMode: state => state.globalVariable.posEditMode
    })
  },
  data () {
    return {
      deviceInfo: {},
      dialogVisible: false,
      isShowState: false,
      isShowMode: true,
      isChange: false,
      agentid: '0',
      crossname: '',
      controlList: [
        {id: 3, name: this.$t('openatc.home.ControlOption3'), bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'},
        {id: 2, name: this.$t('openatc.home.ControlOption2'), bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'},
        {id: 1, name: this.$t('openatc.home.ControlOption1'), bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'},
        {id: 4, name: this.$t('openatc.home.ControlOption4'), bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'},
        {id: 0, name: this.$t('openatc.home.ControlOption5'), bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'}
      ],
      map: null,
      lngLat: {
        lng: '0.00000000',
        lat: '0.00000000'
      },
      visible: true
    }
  },
  watch: {
    agentid: {
      handler: function (val, oldVal) {
        this.visible = false
        this.resetControl()
        this.$nextTick(() => {
          this.visible = true
        })
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    closeFormDialog () {
      this.dialogVisible = false
      this.visible = false
      const body = document.querySelector('#map')
      body.style.cursor = this.originStyle
      this.$store.dispatch('SetPosEditMode', false)
    },
    openEdge (dev) {
      this.deviceInfo = JSON.parse(JSON.stringify(dev))
      this.isChange = !this.isChange
      this.agentid = dev.agentid
      this.crossname = dev.name
      this.dialogVisible = true
      this.visible = true
      this.map = window.map
    },
    hoverInType (item) {
      for (let i = 0; i < this.controlList.length; i++) {
        if (this.controlList[i].id === item.id) {
          this.controlList[i].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
        }
      }
    },
    hoverOutType (item) {
      for (let i = 0; i < this.controlList.length; i++) {
        if (this.controlList[i].id === item.id && !this.controlList[i].clicked) {
          this.controlList[i].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
        }
      }
    },
    clickType (item) {
      this.curTypeItem = item
      for (let i = 0; i < this.controlList.length; i++) {
        if (this.controlList[i].clicked) {
          delete this.controlList[i].clicked
          this.controlList[i].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
        }
      }
      for (let i = 0; i < this.controlList.length; i++) {
        if (this.controlList[i].id === item.id) {
          this.controlList[i].clicked = true
          this.controlList[i].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
        }
      }
    },
    onChooseLocationClick () {
      this.onLocationClick()
    },
    onLocationClick () {
      this.setDeviceLocation()
      this.$message.info(this.$t('openatc.gis.chooseLocationInfo'))
    },
    setNewLocation (lngLat) {
      this.deviceInfo.lng = lngLat.lng
      this.deviceInfo.lat = lngLat.lat
      console.log(this.deviceInfo)
      this.$emit('onUpdateClick', this.deviceInfo)
    },
    setDeviceLocation () {
      this.$store.dispatch('SetPosEditMode', true)
      let _this = this
      const body = document.querySelector('#map')
      this.originStyle = body.style.cursor
      body.style.cursor = 'crosshair'
      this.map.on('click', function (e) {
        if (!_this.editMode) return
        _this.lngLat.lng = String(e.latlng.lng)
        _this.lngLat.lat = String(e.latlng.lat)
        _this.setNewLocation(_this.lngLat)
        _this.map.off('click')
        body.style.cursor = _this.originStyle
        this.$store.dispatch('SetPosEditMode', false)
      })
    },
    onDetailClick () {
      this.$emit('onDetailClick', this.deviceInfo, 'showModal')
      this.closeFormDialog()
    },
    handleControl () {
      // console.log(this.curTypeItem)
      // console.log(this.curTscControl)
      if (!this.curTypeItem) return
      let controlParam = {
        agentid: this.agentid,
        param: {
          control: this.curTypeItem.id,
          model: this.curTscControl.mode,
          value: 0
        }
      }
      if (this.curTypeItem.id === 0) {
        // 恢复自主控制（多时段）时，value为当前控制方式
        controlParam.param.value = this.curTscControl.control
      }
      this.putControl(controlParam)
    },
    async putControl (reqData) {
      let data = await putControl(reqData)
      let success = 0
      if (!data.data.success) {
        this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
      } else {
        if (data.data.data && data.data.data.data) {
          success = data.data.data.data.success
          if (success !== 0) {
            let errormsg = 'openatccomponents.overview.putTscControlError' + success
            this.$message.error(this.$t(errormsg))
          }
        }
      }
    },
    getTscControl (res) {
      console.log('getTscControl:', res)
      this.curTscControl = res.data.data.data
    },
    resetControl () {
      this.curTypeItem = undefined
      for (let i = 0; i < this.controlList.length; i++) {
        if (this.controlList[i].clicked) {
          delete this.controlList[i].clicked
          this.controlList[i].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
        }
      }
    }
  },
  mounted () {
    this.map = window.map
  }
}
</script>
<style lang="scss">
.base-dialog{
  .el-dialog__wrapper {
    position: unset !important;
//     .el-dialog{
//       position: fixed !important;
//       left: 45%;
//       bottom: 40%;
//     }
  }
}
</style>
